{% extends "base.html" %}

 {%block left-banner%}
{%endblock left-banner%}

{%block title%}
<div class="layui-layout" style="padding-left:20%;text-align:left;top:60px;z-index:1;position: fixed;" >
    <text style="font-size:20px">
    CPJF项目
</text>
</div>
{%endblock title%}

 {%block search%}
 <div class="searchBtn" style="text-align:left;top:120px;position: fixed;">
  <div class="layui-inline">
    <input class="layui-input"  name="search_content" id="tableReload" autocomplete="off" data-type="reload">
  </div>
  <button class="layui-btn" data-type="reload" >搜索</button>
           <input type="checkbox" name="status" value="咨询" lay-skin="primary" style="margin-left:20px" checked>咨询  </input>
<input type="checkbox" name="status" value="需求" lay-skin="primary" style="margin-left:20px">需求  </input>
     <input type="checkbox" name="status" value="改进" lay-skin="primary" style="margin-left:20px" checked>改进  </input>

          <input type="checkbox" name="status" value="BUG" lay-skin="primary" style="margin-left:20px" checked>BUG  </input>


     <button class="layui-btn layui-btn-sm" lay-event="getStatus" id="getStatus" data-type="reload" >按工单状态筛选</button>
    </div>
    {%endblock search%}


{%block body%}
{%load staticfiles%}
<script type="text/javascript" src="{% static '/js/cpjf.js' %}"></script>

<div style="position:relative">
    <table class="layui-table" style="text-align:center" lay-data="{ url:'/index/get_cpjf',
page:true, id:'table', skin: 'row', even: true,limits: [10,15,25,35,45],limit: 10 }  " lay-filter="table">
  <thead>
    <tr>
      <th lay-data="{field:'project', width:'30%',  sort: true}">项目</th>
        <th lay-data="{field:'issue_key', width:'10%',  sort: true,templet:'#issueTpl'}">测试单号</th>
        <th lay-data="{field:'summary', width:'20%',  sort: true}">主题</th>
        <th lay-data="{field:'reporter', width:'10%', sort: true}">报告人</th>
        <th lay-data="{field:'assignee', width: '10%', sort: true}">经办人</th>
         <th lay-data="{field:'status', width: '10%', sort: true}">状态</th>
         <th lay-data="{field:'day',  width: '10%',sort: true}">创建日期</th>
    </tr>
  </thead>

</table>

<script>
        layui.use('table', function(){
        var table = layui.table;
        table.init('table',{done:function(res,curr,count){
          merge(res);
        }
        });
      });
      function merge(res) {
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['project'];//需要合并的列名称
        var columsIndex = [0];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                    if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    }else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
            mergeIndex = 0;
            mark = 1;
        }
    }
    </script>

{% verbatim %}
<script type="text/html" id="issueTpl">
  <div><a href="//jira.uyunsoft.cn/browse/{{d.issue_key}}" class="layui-table-link" target="_blank">{{d.issue_key}}</a></div>
</script>
{% endverbatim %}
</div>
{%endblock body%}